<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04 模版语法</title>
</head>
<body>
  <div id="app">
    <!-- 模版语法-插值-文本 --- 双大括号语法 -->
    {{ msg }}
    <!-- 模版语法-插值-原始 HTML --- 解析输出 -- 商品详情-->
    <div v-html="msg"></div>
    <div v-text="msg"></div>
    <!-- 模版语法-插值 - Attribute - 绑定属性-->
    <!-- 如果属性的值是变量，boolean，number类型，对象，数组，null，undefined，时，需要使用绑定属性 -->
    <div class="btn" v-bind:class="str"></div>
    <div v-bind:test="true"></div>
    <div v-bind:num="100"></div>
    <div v-bind:obj="{ a: 1 }"></div>
    <div v-bind:arr="[1, 2, 3]"></div>
    <!-- 模版语法-插值 - 表达式 -- 简单表达式 -->
    {{ msg.split('').reverse().join('') }}
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      msg: '<h1>hello vue</h1>',
      str: 'btn-success'
    }
  })
</script>
</html>
